<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:jquery-ui="http://java.sun.com/jsf/composite/components/jquery-ui-jsf">
    <h:head>
        <title>jQuery Example</title>
    </h:head>
    <body>
        <f:view>
            <h:form>
                <h:outputScript library="jquery" name="jquery.min.js" target="head"/>
                <h:outputScript library="jquery" name="jquery-ui.min.js" target="head"/>
                <h:outputStylesheet name="jquery-ui/1_7_2/ui-lightness/theme.css" target="head"/>
                <script type="text/javascript">
                    $(document).ready(function() {

                        $("#dialog").dialog({
                            modal:true,
                            autoOpen:false,
                            width:250, 
                            height:100
                        });
                        
                        $("#link").click(function() {
                            $("#dialog").dialog("open");
                            return false;
                        });

                        $("#close").click(function() {
                            $("#dialog").dialog("close");
                            return false;
                        });

                    });
                </script>
                <!-- ui-dialog -->
                <div id="dialog" title="Dialog Title">I'm in a dialog
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div><a id="close" href="#">Close</a></div>
                </div>
                <a id="link" href="#">Link to Dialog</a>
            </h:form>
        </f:view>
    </body>
</html>